<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>iRock</title>
	<style type="text/css" media="screen">
		#box{
			margin-top: 100px;
			text-align: center;
		}
	</style>
</head>
<!-- <body onload = "alert('Hello, I am your pet rock.');">
	<div id="box">
		<img id="rockimg" src="rock1.jpg" alt="iRock" onclick="touchRock()">
	</div>
</body> -->
<body>
	<div id="box">
		<img id="rockimg" src="rock1.jpg" alt="iRock">
	</div>
</body>
<script type="text/javascript">
           var body = document.querySelector('body');
           var rockimg = document.getElementById('rockimg');
	window.onload = function(){
		alert('Hello, I am your pet rock.');

		function touchRock(){
			var userName = prompt('What is your name?' , 'Enter your name here.');
			if(userName) {
				alert('It is good to meet you,' + userName + '.');
				document.getElementById("rockimg").src = "rock2.jpg"
			}
		}

		rockimg.onclick = function() {
			touchRock();
		}
	}
</script>
</html>